<script setup>
import { useUserQuestionStore } from '@/stores'
import { onMounted, ref, computed } from 'vue'
import { reportAnswerAPI, sendAnswerAPI, getUserProblemAnswerAPI, sendGradeAPI } from '@/api/user'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
const router = useRouter()
const userQuestionStore = useUserQuestionStore()
const userStore = useUserStore()
const userQuestionInfo = computed(() => {
  return userQuestionStore.UserQuestionInfo
})

const answerList = ref([])
const getUserProblemDetail = async () => {
  const res = await getUserProblemAnswerAPI({
    ProblemId: userQuestionInfo.value.Id
  })
  console.log(res)
  answerList.value = res.data
}
const options = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0]
const grade = async (Answer) => {
  const res = await sendGradeAPI({
    UserName: userStore.userInfo.userName,
    Id: Answer.Id,
    Gradle: Answer.Gradle,
    ProblemId: userQuestionInfo.value.Id
  })
  if (res.data == 1) {
    getUserProblemDetail()
    ElMessage.success('评分成功')
  } else {
    ElMessage.error('评分失败')
  }
}

const showReport = ref(false)
const reportedAnswer = ref()
const report = (AnswerId, FaBuUserName, AnswerName) => {
  reportedAnswer.value = {
    JuBaoUserName: userStore.userInfo.userName,
    FaBuUserName: FaBuUserName,
    Reason: '',
    AnswerId: AnswerId,
    AnswerName: AnswerName
  }
  showReport.value = true
}
const reportAnswer = async () => {
  if (reportedAnswer.value.JuBaoUserName === reportedAnswer.value.FaBuUserName) {
    ElMessage.error('举报失败，不能举报自己的问题')
    return
  }
  const res = await reportAnswerAPI(reportedAnswer.value)
  if (res.data === 1) {
    ElMessage.success('举报成功')
    showReport.value = false
  } else {
    ElMessage.error('举报失败')
  }
}

const showWrite = ref(false)
const writedAnswer = ref()
const writeAnswer = (ProblemId) => {
  writedAnswer.value = {
    UserName: userStore.userInfo.userName,
    ProblemId: ProblemId,
    Status: 1,
    AnswerName: '',
    ProblemName: userQuestionInfo.value.ProblemName
  }
  showWrite.value = true
}
const sendAnswer = async () => {
  const res = await sendAnswerAPI(writedAnswer.value)
  console.log(res)
  if (res.data === 1) {
    ElMessage.success('发布成功')
    getUserProblemDetail()
    showWrite.value = false
  } else {
    ElMessage.error('发布失败')
  }
}
const convertISO8601ToSimplified = (isoString) => {
  // 使用Date对象解析ISO 8601时间字符串
  const date = new Date(isoString)

  // 获取年、月、日、小时和分钟（注意：不使用UTC方法）
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，所以需要+1
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')

  // 构建并返回转换后的时间字符串
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

const goBack = () => {
  router.go(-1)
}
onMounted(() => {
  getUserProblemDetail()
})
</script>

<template>
  <el-icon size="20" color="#3670ee" style="padding: 5px" @click="goBack()"
    ><ArrowLeftBold
  /></el-icon>
  <span class="title">问题详情</span>
  <!-- 问题信息 -->
  <div class="question-info">
    <div class="problem-name">{{ userQuestionInfo.ProblemName }}</div>
    <div class="card-footer">
      <span class="name">{{ userQuestionInfo.UserName }}</span>
      <el-tag type="success" effect="light" round class="newtag">
        {{ userQuestionInfo.Tag }}
      </el-tag>
      <span class="money">{{
        userQuestionInfo.Money == 0 ? '无悬赏' : userQuestionInfo.Money.toFixed(2) + '元悬赏'
      }}</span>
      <span class="time">{{ convertISO8601ToSimplified(userQuestionInfo.Time) }}</span>
    </div>
    <!-- <el-button
      type="primary"
      class="write-answer"
      @click="writeAnswer(userQuestionInfo.Id)"
    >
      写回答<el-icon class="el-icon--right"><Edit /></el-icon>
    </el-button> -->
  </div>
  <!-- 回答列表 -->
  <div v-for="item in answerList" :key="item.Id">
    <div style="width: 100%" v-if="item.Status != 0" class="card">
      <span class="content">{{ item.AnswerName }}</span>
      <div>
        <span class="user">{{ item.UserName }}</span>
        <span class="time">{{ convertISO8601ToSimplified(item.Time) }}</span>
        <span class="grade">{{ item.Gradle == 0 ? '暂无评分' : item.Gradle + '分' }}</span>
      </div>
      <el-select
        class="select-grade"
        v-model="item.Gradle"
        placeholder="选择分数"
        style="width: 240px"
      >
        <el-option v-for="grade in options" :key="grade" :label="grade" :value="grade" />
      </el-select>
      <el-button type="primary" @click="grade(item)" class="grade-button">评 分</el-button>
      <div class="more" @click="report(item.Id, item.UserName, item.AnswerName)">举报</div>
    </div>
    <el-divider />
  </div>
  <!-- 举报回答 -->
  <el-dialog v-model="showReport" title="举报回答" width="500">
    <el-form :model="reportedAnswer">
      <el-form-item label="回答发布人:">
        <el-input v-model="reportedAnswer.FaBuUserName" autocomplete="off" disabled />
      </el-form-item>
      <el-form-item label="回答:">
        <el-input v-model="reportedAnswer.AnswerName" autocomplete="off" disabled />
      </el-form-item>
      <el-form-item label="举报原因:">
        <el-input v-model="reportedAnswer.Reason" autocomplete="off" />
      </el-form-item>
      <el-button type="primary" @click="reportAnswer()">举 报</el-button>
    </el-form>
  </el-dialog>
  <!-- 发布回答 -->
  <el-dialog v-model="showWrite" title="发布回答" width="500">
    <el-form :model="writedAnswer">
      <el-form-item label="问题：">
        <el-input v-model="writedAnswer.ProblemName" autocomplete="off" disabled />
      </el-form-item>
      <el-form-item label="输入回答：">
        <el-input v-model="writedAnswer.AnswerName" autocomplete="off" />
      </el-form-item>
      <el-button type="primary" @click="sendAnswer()">发布回答</el-button>
    </el-form>
  </el-dialog>
</template>

<style scoped>
.question-info {
  position: relative;
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.3);
  margin: 10px 0;
  padding: 5px;
}
.problem-name {
  font-size: 20px;
  margin: 15px;
  margin-bottom: 5px;
  font-weight: 700;
}
.title {
  font-size: 20px;
  line-height: 20px;
  color: #3670ee;
  font-weight: 700;
}
.name {
  margin-left: 15px;
  margin-right: 15px;
}
.newtag {
  margin-right: 10px;
}
.time {
  font-size: 12px;
  margin-left: 10px;
}
.money {
  font-size: 15px;
  font-weight: 600;
}
.write-answer {
  margin: 15px;
}
.card {
  position: relative;
  margin: 10px 0;
}
.content {
  margin: 10px;
  font-size: 20px;
  font-weight: 500;
}
.user {
  margin-left: 10px;
  margin-top: 10px;
  font-size: 14px;
}
.grade {
  margin-left: 15px;
}
.grade-button {
  position: absolute;
  right: 80px;
  top: 10px;
}
.select-grade {
  position: absolute;
  right: 140px;
  top: 10px;
}
.more {
  position: absolute;
  right: 20px;
  top: 5px;
  background-color: #f9f9f9;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 13px;
  border-radius: 40px;
  cursor: pointer;
}
</style>
